import _ from "lodash";
import {Row} from "antd";
import React from "react";
import Directive from "./directive";
import {WeaCheckbox, WeaHelpfulTip, WeaInput, WeaLocaleProvider, WeaRichText} from "ecCom";

const { getLabel } = WeaLocaleProvider;

export default class Props extends React.Component {
  constructor() {
    super();

    this.handlePropChange = _.memoize(this.handlePropChange.bind(this));
  }

  handlePropChange(key, handleValue = v => v, debounceTime) {
    const directive = new Directive(key, this);

    if(_.isNumber(handleValue)) {
      debounceTime = handleValue;
      handleValue = v => v;
    }

    const handleChange = value => {
      if(this.props.onChange) {
        value = directive.with(value, handleValue);
        
        this.props.onChange(directive.realKey, value);
        // 联动属性
        directive.refs.forEach(({key, value}) => {
          this.props.onChange(key, value);
        });
      }
    };

    if (debounceTime) {
      return _.debounce(handleChange, debounceTime);
    }

    return handleChange;
  }

  renderDefaultValue() { return null; }
  renderContent() { return null; }

  render() {
    const { data, type } = this.props;
    const { title, desc, required } = data;
    const ckConfig = {
      startupFocus: false,
      toolbar: [
        { name: 'styles', items: ['FontSize'] },
        { name: 'colors', items: ['TextColor', 'BGColor', 'RemoveFormat'] },
        { name: 'paragraph', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight'] },
        { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike'] },
        { name: 'links', items: ['Link', 'Unlink', '-', 'Maximize', 'Image'] },
      ],
      autoGrow_minHeight: 60,
      uploadUrl: '/api/edc/page/uploadFile4Editor',
      extraPlugins: 'image2,uploadimage,autogrow'
    };

    return (
      <div className={`wea-edc-props-${type}`}>
        {title !== undefined &&
          <Row>
            <label>{getLabel('502496','标题')}</label>
            <WeaInput value={title} onChange={this.handlePropChange('title')} />
          </Row>
        }
        {this.renderDefaultValue()}
        <Row>
          <label>{getLabel('502497','描述')}</label>
          <WeaRichText ckConfig={ckConfig} value={desc} onChange={this.handlePropChange('desc')}/>
        </Row>

        {this.renderContent()}

        {required !== undefined &&
        <Row>
          <WeaCheckbox
            id='text'
            content={getLabel('502498','这个是必填项')}
            value={this.props.data.required}
            onChange={this.handlePropChange('required')}
          />
        </Row>
        }
        {required !== undefined &&
        <Row>
          <WeaCheckbox
            id='text'
            content={getLabel('0','隐藏字段')}
            value={this.props.data.hidden}
            onChange={this.handlePropChange('hidden')}
          />
          <WeaHelpfulTip
            title={<div>勾选后，该字段只有管理员及数据维护员可见，普通填写者将看不到此字段；通常适用于当你想为已提交数据设置一些特殊属性，如状态（处理/未处理）或优先级（重要/一般）。</div>}
            placement="topRight"
          />
        </Row>
        }
      </div>
    );
  }
}

Props.defaultProps = {
  onChange: () => { }
};